<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <title>分析生命周期-挂在流程</title>
</head>
<body>
<!--
    挂载流程图
-->
    <div id="root">
      <h2>这是n的值{{n}}</h2>
      <button @click="add">点击n++</button>
        <button @click="bye">点我销毁vm</button>
    </div>
    <script>
      new Vue({
        el:'#root',
        // template:'<div><h2>这是n的值{{n}}</h2>\n' +
        //         '      <button @click="add">点击n++</button></div>',
        data:{
          n:1
        },
        methods:{
          add(){
              console.log('add')
            this.n++
          },
            bye(){
                  console.log('bye')
              this.$destroy()
            }
        },
          watch:{
            n(){
                console.log("n变化了")
            }
          },
        beforeCreate(){
          console.log('beforeCreate');
        },
        created(){
          console.log('created');

        },
        beforeMount(){
          console.log('beforeMount')

        },
        mounted(){
          console.log('mounted')
        },
          beforeUpdate(){
              console.log('beforeUpdate')

          },
          updated(){
              console.log('updated')

          },
          beforeDestroy(){
              console.log('beforeDestroy')
          },
          destroyed(){
              console.log('destroyed')
          }


      })

    </script>
</body>
</html>